<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>no title</title>
	<script src="./resource/js/jquery-3.1.0.js"></script>
	<script src="./resource/bootstrap-3.3.0/js/bootstrap.js"></script>
	
	<link href="./resource/bootstrap-3.3.0/css/bootstrap.css"
		  rel="stylesheet">
	<link href="./resource/bootstrap-3.3.0/css/bootstrap-theme.css"
		  rel="stylesheet">
	<style>
		.merchantTable{
			float:right;
			width:33%;
		}
		.merchantRegist{
			float:left;
		}
		.dishTable{
			float:right;
			width:33%;
		}
		body{
			padding-left:10%;
			padding-right:10%;
			padding-bottom:3%;
			padding-top:3%;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		}

		#merchantTableId thead th{
			align:center;
			text-align: center;
			background-color:#efe2d2;
		}
		#merchantTableId tbody td{
			align:center;
			text-align:center;
		}
		#dishTableId thead th{
			align:center;
			text-align: center;
			background-color:#a37373;
		}
		#dishTableId tbody td{
			align:center;
			text-align:center;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#merchantTableId tbody").on("mouseenter","tr",function(){
				$(this).css("background-color","#efe2d2");
			});


			$("#merchantTableId tbody").on("mouseleave","tr",function(){
				$(this).css("background-color","");
			});

			$("#dishTableId tbody").on("mouseenter","tr",function(){
				$(this).css("background-color","#a37373");
			});


			$("#dishTableId tbody").on("mouseleave","tr",function(){
				$(this).css("background-color","");
			});
		});
	</script>
</head>

<body>
<form onsubmit="return false" id="addMerchantForm" class="form-horizontal merchantRegist" enctype="multipart/form-data"  >
	<div class="form-group">
		<label   class="col-sm-3 control-label">account</label>
		<div class="col-sm-6">
			<input type="text" class="form-control" id="account"
				   onkeyup="avoidDouble()"   required="required"  placeholder="your account">
		</div>
	</div>
	<div align="center">
		<div id="accountInfo"></div>
	</div>
	<div class="form-group">
		<label  class="col-sm-3 control-label">password</label>
		<div class="col-sm-6">
			<input type="password" class="form-control" id="merchantPsd"
				   required="required"  placeholder="your password">
		</div>
	</div>
	<div class="form-group">
		<label  class="col-sm-3 control-label">confirm</label>
		<div class="col-sm-6">
			<input type="password" class="form-control" id="confirmPsd"
				   required="required"    placeholder="confirm your password">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-3 col-sm-3">
			<button id="summitMerchantInfo" onclick="addMerchant()"  class="btn btn-warning">add Merchant</button>
		</div>
	</div>
	<div class="form-group" align="center">
		<div id="alertInfo"></div>
	</div>
</form>

<table id="dishTableId" class="table dishTable">
	<thead>
	<tr>
		<th>dishIcon</th>
		<th>dname</th>
		<th>price</th>
		<th>action</th>
	</tr>
	</thead>
	<tbody id="dishTbody">

	</tbody>
	<tfoot id="dishTfoot">
	</tfoot>
</table>

<table id="merchantTableId" class="table merchantTable">
	<thead>
	<tr>
		<th>icon</th>
		<th>account</th>
		<th>password</th>
		<th>action</th>
	</tr>
	</thead>
	<tbody id="merchantTbody">

	</tbody>
</table>
</body>
<script>
	$(document).ready(function(){
		loadAllMerchant();

	})
//	function showMerchants(){
//		var filters=[];
//		filters.push({
//			fieldName:'account',
//			operator:'LIKE',
//			value:'base'
//		})
//		var BaseConditionQuery={
//			page:1,
//			limit:1,
//			sort:{
//				direction:'DESC',
//				property:'account'
//			},
//			searchFilters:filters
//		}
//		$.ajax("merchants",{
//			method:"GET",
//			dataType:"json",
//			data:JSON.stringify(BaseConditionQuery),
//			success:function (result) {
//				console.log(result);
//			}
//		})
//	}
//	showMerchants();
	function loadAllMerchant(){
		$.ajax("merchant",{
			method:"GET",
			type:"json",
			success:function (result) {
				if(result){
					processMerchant(result);
				}
			}
		})
	}
	function processMerchant(data) {
		data.forEach(function (item,index) {
			merchantTableAdd(item);
		})
	}
	function merchantTableAdd(item){
		var td1=$("<td></td>").text(item.icon);
		var td2=$("<td></td>").text(item.account);
		var td3=$("<td></td>").text(item.password);
		var td4=$("<td></td>");
		var but1=$("<button></button>").attr("class","btn btn-danger btn-xs").click(function () {
			deleteMerchant(this,item.mid);
		}).text("delete").appendTo(td4);
		var but2=$("<button></button>").attr("class","btn btn-success btn-xs").click(function () {
			showDishes(item.mid);
		}).text("dishes").appendTo(td4);
		$("<tr></tr>").append(td1,td2,td3,td4).appendTo("#merchantTbody");
	}
	function deleteMerchant(elem,mid){
		$(elem).parent().parent().remove();
		data=JSON.stringify({"mid":mid});
		$.ajax("merchant",{
			method:"DELETE",
			type:"json",
			data:data,
			success:function (result) {
				console.log(result);
			}
		})
	}
	function addMerchant(){

		var account=$("#account").val();
		var psd=$("#merchantPsd").val();
		var confirmPsd=$("#confirmPsd").val();
		var data={"account":account,"password":psd};
		if(psd==confirmPsd){
			avoidDouble();
			$.ajax("merchant",{
				method:"POST",
				type:"json",
				data:data,
				success:function (result) {
					$("#summitMerchantInfo").attr("disabled", true);
					merchantTableAdd(result);

				}
			});
			avoidDouble();
			$("#alertInfo").text("密码正确");
		} else{
			$("#alertInfo").text("密码不匹配");
		}
	}
	function avoidDouble(){
		var account=$("#account").val();
		var json = {
			"account" : account
		}
		$.ajax("merchantAccount",{
			method:"GET",
			type:"json",
			data:json,
			success:function (result) {
				if(result=="exist"){
					$("#accountInfo").text("acccount has existed");
					$("#summitMerchantInfo").attr("disabled", true);
				}else{
					$("#accountInfo").text("");
					$("#summitMerchantInfo").attr("disabled", false);
				}
			}
		})
	}
	function showDishes(mid) {
		var data={"mid":mid};
		$.ajax('dishes',{
			method:'GET',
			type:'json',
			data:data,
			success:function (result) {
				if(result){
					$("#dishTbody").text("");
					$("#dishTfoot").text("");
					result.forEach(function (item,index) {
						addDishToTable(item);
					})
					var td1=$("<td></td>");
					$("<input>").attr("class","form-control").appendTo(td1);
					var td2=$("<td></td>");
					$("<input>").attr("class","form-control").attr("id","dishName").appendTo(td2);
					var td3=$("<td></td>");
					$("<input>").attr("class","form-control").attr("type","number").attr("id","dishPrice").appendTo(td3);
					var td4=$("<td></td>").attr("id","inputDishAction");
					$("<button></button>").attr("class","btn btn-success btn-xs").attr("id","addDishBut").text("add").click(function(){
						addDish($("#dishName").val(),$("#dishPrice").val(),mid);
					}).appendTo(td4);
					$("<tr></tr>").append(td1,td2,td3,td4).appendTo("#dishTfoot");
				}
			}
		})
	}
	function addDishToTable(item){
		var td1=$("<td></td>").text(item.dicon);
		var td2=$("<td></td>").text(item.dname);
		var td3=$("<td></td>").text(item.price);
		var td4=$("<td></td>");
		var but1=$("<button></button>").attr("class","btn btn-danger btn-xs").click(function(){
			deleteDish(this,item.did);
		})
				.text("delete").appendTo(td4);
		var but2=$("<button></button>").attr("class","btn btn-warning btn-xs").click(function () {
			$("#dishName").attr("value",item.dname);
			$("#dishPrice").attr("value",item.price);
			if($("#updateDishBut").length>0){
				$("#updateDishBut").remove();
			};
			$("<button></button>").attr("class","btn btn-success btn-xs").attr("id","updateDishBut").click(function () {
				updateDish($("#dishName").val(),$("#dishPrice").val(),item.did);
			}).text("update").appendTo("#inputDishAction");
		}).text("put").appendTo(td4);
		$("<tr></tr>").append(td1,td2,td3,td4).attr("id",item.did).appendTo("#dishTbody");
	}
	function deleteDish(elem,did){
		$(elem).parent().parent().remove();
		var data=JSON.stringify({"did":did});
		$.ajax('dishes',{
			method:'DELETE',
			type:'json',
			data:data,
			success:function(result){
				console.log(result);
			}
		})
	}
	function addDish(dname,price,mid){
		if(dname&&price){
			var data={"dname":dname,"price":price,"mid":mid};

			$.ajax('dishes',{
				method:'POST',
				type:'json',
				data:data,
				success:function(result){
					data.did=result;
					addDishToTable(data);
				}
			})
		}
	}
	function  updateDish(dname,price,did) {
		 
		if(dname&&price&&did){
			var data={"dname":dname,"price":price,"did":did};
			data=JSON.stringify(data);
			$.ajax('dishes',{
				method:'PUT',
				type:'json',
				data:data,
				success:function (result) {
					$("#"+did).children("td")[1].innerHTML=dname;
					$("#"+did).children("td")[2].innerHTML=price;
				}
			})
		}
	}
</script>
</html>